Intermix v0.7.0 Released

Roland Jansen

Intermix Version 0.7.0 introduces external plugins that can be loaded at runtime.

It is now possible to write custom plugins as ES2015 modules and load them either as npm package or at runtime into the browser. There will be a template repository that can be used to get your plugin dev-environment up and running in no time (should be ready in a few days).

If using a bundler, adding external plugins is as simple as this:

import { addPlugin, addPluginClass } from "intermix";
import MyPluginConstructor from "MyPlugin";
addPluginClass(MyPluginConstructor);
// Then you can work with this plugin (eg build instances)
const pluginName = MyPluginConstructor.metaData.name;
const pluginUid = addPlugin(pluginName); // register an instance of the plugin

If you want the plugin to load at runtime you can do so with dynamic imports:

import("<url>").then((PluginModule) => {
addPluginClass(PluginModule.default);
}

or even simpler

const PluginModule = await import("<url>");
addPluginClass(PluginModule.default);

The other major change in this release is that Rollup replaces Webpack for bundling. Webpack lacks support for EcmaScript modules (ESM) as output format which turned out to be a real problem for intermix.

I tried different formats like IIFE, AMD and CommonJS but all of them did not work on both client and server side. The main file in the npm package is still CommonJS but ESM should be used wherever possible and is the only format for plugins.

In the future, chances are that bundling can be dropped (for NPM packages) to get better tree-shaking results and less code loaded into the client. For this scenario npm run compile creates experimental, non-bundled versions of intermix (CJS and ESM) in the lib/ folder.
With this new feature I could drop the output size of the template-repo from 49kB to 2kB (!).

You can read about all changes in detail in the Changelog.